<template>
   <div>
     <div class="shop">
     <div class="shop-top">商品ID：{{currentId}}</div>
     <el-table :data="tableData"
      style="width:100%"
      border
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column label='SKU编号' prop='sku_id'></el-table-column>
      <el-table-column v-for="(item,index) in attr_name_arr" :label='item' :key='index'>
        <template slot-scope="scope">
          <p>{{scope.row.attr_value_arr[index]}}</p>
        </template>
      </el-table-column>
      <el-table-column label='供货价格' >
       <template slot-scope="scope">
         <p>¥ {{scope.row.supply_price}}</p>
       </template>
      </el-table-column>
      <el-table-column label='商品库存' prop='stock'></el-table-column>
      <el-table-column label='* 库存预警值'>
        <template slot-scope="scope">
          <div class="stock">{{scope.row.warning_stock}}</div>
        </template>
      </el-table-column>
      </el-table>
   </div>
   <div class="line"></div>

    <div class="class_btn">
      <el-button size="mini" type="primary" @click="handleCancel">确定</el-button>
      <el-button size="mini" type="danager" @click="handleCancel">取消</el-button>
    </div>
   </div>
</template>

<script>
import { supplyProductSkuList } from '@/api/autarky';
export default {
  props:['currentId','visible'],
  data(){
    return {
      attr_name_arr:[],
      tableData:[]
    }
  },
  watch: {
    visible(newValue) {
      if (newValue) {
         this.getsupplyProductSkuListData()
      }
    }
  },
  methods :{
    async getsupplyProductSkuListData(){
       console.log(this.currentId)
      let res = await supplyProductSkuList(this.currentId)
      if(res.code === 10000){
        this.attr_name_arr = res.data.attr_name_arr
        this.tableData = res.data.list
      }else{
        this.$message.error(res.error)
      }
    },
     tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
     handleCancel() {
      this.$emit("showSkuInfoDetail");
    },
  }
}
</script>
<style lang="scss" scoped>
 .shop{
   padding: 20px;
   .shop-top{
     margin-bottom: 20px;
   }
   .stock{
     border: 1px solid #e5e5e5;
     padding: 8px 10px;
     color: #999999;
   }
 }

 .line{
   height: 1px;
   margin-top: 30px;
   background-color: #e5e5e5;
 }
 .class_btn {
    margin-top: 30px;
    margin-bottom: 20px;
    text-align: center;
  }
</style>